<!--
  ~ The MIT License (MIT)
  ~
  ~ Copyright (c) 2015 - <Ali Ok>
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy
  ~ of this software and associated documentation files (the "Software"), to deal
  ~ in the Software without restriction, including without limitation the rights
  ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~ copies of the Software, and to permit persons to whom the Software is
  ~ furnished to do so, subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in
  ~ all copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  ~ THE SOFTWARE.
  -->

<html ng-app="ion-affix-demo">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>ion-affix</title>

    <link href="../bower_components/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="../bower_components/ionic/js/ionic.bundle.js"></script>

    <script src="../ion-affix.js"></script>

    <script>
        angular.module('ion-affix-demo', ['ion-affix'])
                .controller('demoController', function ($scope) {
                    $scope.firstGroupClick = function () {
                        window.alert('First group!');
                    };
                    $scope.secondGroupClick = function () {
                        window.alert('Second group!');
                    };
                });
    </script>

</head>

<body>
<ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">ion-affix demo</h1>
</ion-header-bar>

<!-- or <ion-scroll> -->
<ion-content scroll-event-interval="5" ng-controller="demoController">
    <div class="list">
        <div class="item item-divider item-icon-right" ion-affix data-affix-within-parent-with-class="list">
            Group 1
            <button class="button icon-left ion-home button-small" ng-click="firstGroupClick()">Click me</button>
        </div>
        <div class="item item-text-wrap">Item 0</div>
        <div class="item item-text-wrap">Item 1</div>
        <div class="item item-text-wrap">Item 2</div>
        <div class="item item-text-wrap">Item 3</div>
        <div class="item item-text-wrap">Item 4</div>
    </div>

    <div class="list">
        <div class="item item-divider" ion-affix data-affix-within-parent-with-class="list">
            Group 2
            <button class="button icon-left ion-home button-small" ng-click="secondGroupClick()">Click me</button>
        </div>
        <div class="item item-text-wrap">Item 0</div>
        <div class="item item-text-wrap">Item 1</div>
        <div class="item item-text-wrap">Item 2</div>
        <div class="item item-text-wrap">Item 3</div>
        <div class="item item-text-wrap">Item 4</div>
    </div>

    <div class="list">
        <div class="item item-divider" ion-affix data-affix-within-parent-with-class="list">Group 3</div>
        <div class="item item-text-wrap">Item 0</div>
        <div class="item item-text-wrap">Item 1</div>
        <div class="item item-text-wrap">Item 2</div>
        <div class="item item-text-wrap">Item 3</div>
        <div class="item item-text-wrap">Item 4</div>
    </div>
</ion-content>
</body>
</html>
